<template>
	<view :class="{'yy':true,'hid':visible==false}"></view>
	<view :class="{'root':true,'hid':visible==false}">
		<!--商品-->
		<view class="goodsinfo">

			<image src="/static/a.jpg" class="goodsimg"></image>
			<view class="info">
				<!--价格-->
				<view class="price">
					<view class="small">￥</view>
					<view class="sale">{{sku.priceFee}}</view>
					<view class="small">.00</view>
				</view>

				<view style="display: flex;">
					<view style="color: #666;">已选</view>
					<view>{{sku.skuName}}</view>
				</view>

			</view>

			<image src="../../static/close.png" class="cls" @click="cls"></image>

		</view>


		<!--遍历规格-->
		<template v-for="spec in goods.attrList">
			<!--规格-->
			<view class="spec">
				{{spec.name}}
			</view>
			<view class="spec-container">
				<template v-for="v in spec.attrValueList">
					<view class="item_active" v-if="isExist(spec.name,v.value)">{{v.value}}</view>
					<view class="item" v-else @click="sel(spec.name,v.value)">{{v.value}}</view>

				</template>
			</view>
		</template>



		<!--数量-->
		<view class="num-container">
			<view>数量</view>
			<view class="num">
				<view :class="{'ena':num>1,'dis':num==1}" @click="jian">-</view>
				<view class="numvalue">{{num}}</view>
				<view class="ena" @click="num++">+</view>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<!--确定-->
		<view class="btn" @click="save">确认</view>

		<view style="height: 20rpx;"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		saveToCar
	} from '@/api/car.js'

	//购买数量
	const num = ref(1);

	//已选的规格
	const selObj = {};

	//定义属性
	const props = defineProps({
		visible: {
			type: Boolean,
			required: false,
			default: false
		},
		sku: {
			type: Object,
			required: true,
			default: () => {
				return {

				}
			}
		},
		goods: {
			type: Object,
			required: true,
			default: () => {
				return {};
			}
		}
	})
	//声明事件
	const emit = defineEmits(["close", "updateSku", "refreshCartCount"])

	function isExist(name, v) {
		let pos = props.sku.skuName.indexOf(v);
		if (pos >= 0) {
			selObj[name] = v;
			return true;
		}

		return false;
	}

	//减
	function jian() {
		if (num.value > 1) {
			num.value = num.value - 1;
		}
	}

	//选择规格
	function sel(name, v) {
		//更新已先中的规格
		selObj[name] = v;
		//根据对象上已有的规格值  找对应的sku
		let list = props.goods.skuList;
		for (let i = 0, len = list.length; i < len; i++) {
			//获取当前sku
			let tmp = list[i];
			//获取skuname
			let name = tmp.skuName;

			//标志
			let flag = true; //默认是当前对象

			//遍历对象
			for (let o in selObj) {
				//当前规格值
				let svalue = selObj[o];
				//判断sku名称中是否有该规格
				if (name.indexOf(svalue) == -1) {
					flag = false; //不是当前对象
					break; //终止循环 查找一下sku
				}

			}

			if (flag) {
				//当前sku就是要找的
				console.log("找到sku>>>>>>>>>>>", tmp)
				emit("updateSku", tmp);
				break;
			}

		}
	}

	//确认
	async function save() {
		let data = {};
		data.skuId = props.sku.skuId;
		data.count = num.value;
		let res = await saveToCar(data);
		if (res.code == 200) {
			uni.showToast({
				title: "加入成功",
			})

			// 触发父组件的事件，让父组件重新获取购物车数量
			emit("refreshCartCount");
			cls();
		}
	}

	//关闭
	function cls() {
		//向父组件  抛出事件close
		emit("close");
	}
</script>

<style scoped>
	.hid {
		display: none;
	}

	.yy {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	.btn {
		width: 700rpx;
		background-color: #d81e06;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50px;
		margin: auto;
		text-align: center;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.num {
		display: flex;

	}

	.dis {
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-right: 5px;
		color: #999;
		font-size: 18px;

	}

	.ena {
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #000;
		margin-left: 5px;
		font-size: 18px;
	}

	.numvalue {
		padding: 0 15px;
		background-color: #eee;
	}

	.num-container {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
	}

	.spec-container {
		display: flex;
		flex-wrap: wrap;
	}

	.spec {
		color: #000;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
	}

	.spec-container>view {
		border-radius: 50px;
		display: inline-block;
		padding: 3px 15px;
		margin-bottom: 10px;
		margin-left: 10px;
	}

	.item {
		background-color: #ccc;
	}

	.item_active {
		border: #d81e06 solid 1px;
		background-color: #f1fff1;
		color: #d81e06;
		font-weight: bold;
	}

	.info {
		width: 500rpx;
		margin-left: 10px;
	}

	.cls {
		width: 40rpx;
		height: 40rpx;
		position: relative;

	}

	.goodsinfo {
		display: flex;
		padding-top: 20px;
	}

	.goodsimg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10px;
	}

	.price {
		color: #d81e06;
		display: flex;
		align-items: baseline;
		font-weight: bold;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 18rpx;
	}

	.name {
		color: #000;
		font-weight: bold;
		font-size: 16px;
		line-height: 20px;
	}

	.sale {
		font-size: 24px;
	}

	.small {
		font-size: 12px;
	}


	.root {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		background-color: #fff;
		z-index: 11;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.root>view {
		width: 710rpx;
		margin: auto;
	}
</style>
